<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex flex-direction flex-wrap align-stretch benben-position-layout flex notgrainStation_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub notgrainStation_fd0_0'>
          <view class='flex flex-wrap align-center notgrainStation_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  notgrainStation_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='notgrainStation_fd0_0_c1_c0'>加入全国粮站</text>
          </view>
          <view class='flex flex-wrap align-center justify-end notgrainStation_fd0_0_c0'>
            <image class='notgrainStation_fd0_0_c2_c0' mode="aspectFit" :src='STATIC_URL+"7.png"'></image>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
        <view class='flex flex-wrap align-center'>
          <map id="map" :markers="markers" class="map" :show-location="true" :latitude="lat" :longitude="lng"></map>
        </view>
        <view class='flex flex-direction flex-wrap align-center notgrainStation_fd1_1'>
          <text class='notgrainStation_fd1_1_c0'>我的位置</text>
          <text class='notgrainStation_fd1_1_c1'>为了贸易商能导航到您这里，请您确保您的位置是粮站
            的精准位置，您可以在粮站位置，点击定位，即可确定
            精准位置。</text>
          <view class='flex flex-wrap align-center justify-center notgrainStation_fd1_1_c2' @click.stop='getLocation'>
            <text class='fu-iconfont2  notgrainStation_fd1_1_c2_c0'>&#xe645;</text>
            <text class='notgrainStation_fd1_1_c2_c1'>立刻获取定位</text>
          </view>
          <button class='notgrainStation_fd1_1_c3' @tap.stop="goMap" data-type="redirectTo"
            :data-url="`/pages/wode/businessContent/businessContent?lat=${lat}&lng=${lng}`">下一步</button>
        </view>
      </view>

      <!---flex布局flex布局结束-->


    </view>
  </view>
</template>
<script>
  export default {
    components: {},


    data() {
      return {
        lat: '',
        lng: '',
        city: '',
        markers: []
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {

    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      let that = this
      uni.getLocation({
        type: 'gcj02',
        // #ifdef APP
        geocode: true,
        // #endif
        isHighAccuracy: true,
        success: adr => {
          console.log('adradradradr', adr)
          that.lng = adr.longitude
          that.lat = adr.latitude
          that.city = adr.city
          // that.city = adr.city
          that.markers = [{
            latitude: parseFloat(that.lat),
            longitude: parseFloat(that.lng),
            iconPath: 'https://ttk-saas.oss-cn-beijing.aliyuncs.com/m4913/2024-03-14/bccd32d4fb65c7006168ba5c274c59b71710386721581.jpg'
          }]
          console.log('markers0', that.markers)
        }

      })
    },
    mounted() {},
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      goMap() {
        if (!this.lat) {
          this.$message.info('请先获取当前位置')
          return;
        }
        uni.redirectTo({
          url: `/pages/wode/businessContent/businessContent?lat=${this.lat}&lng=${this.lng}`
        })
      },
      getLocation(e) {
        this.$message.info('加载中')
        uni.getLocation({
          type: 'gcj02',
          // #ifdef APP
          geocode: true,
          // #endif
          isHighAccuracy: true,
          success: adr => {
            console.log('adradradradr', adr)
            that.lng = adr.longitude
            that.lat = adr.latitude
            that.city = adr.city
            that.markers = [{
              latitude: parseFloat(that.lat),
              longitude: parseFloat(that.lng),
              iconPath: 'https://ttk-saas.oss-cn-beijing.aliyuncs.com/m4913/2024-03-14/bccd32d4fb65c7006168ba5c274c59b71710386721581.jpg'
            }]
          }
        })
      }
    }
  };
</script>
<style lang="scss" scoped>
  .map {
    flex: 1;
    // width: 750rpx;
    width: 100%;
    height: 700rpx;
  }

  ::v-deep .amap-logo {
    opacity: 0 !important;
  }

  ::v-deep .amap-copyright {
    opacity: 0 !important;
  }


  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: rgba(255, 255, 255, 1);
    background-size: 100% auto;
  }

  .notgrainStation_flex_0 {
    background: rgba(255, 255, 255, 1);
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto;
  }

  .notgrainStation_fd0_0_c2_c0 {
    width: 119rpx;
    height: 55rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .notgrainStation_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 50rpx;
  }

  .notgrainStation_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .notgrainStation_fd0_0_c0 {
    width: 120rpx;
  }

  .notgrainStation_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .notgrainStation_fd1_1_c3 {
    border: 1px solid rgba(37, 104, 174, 1);
    background: rgba(255, 255, 255, 1);
    border-radius: 36rpx;
    width: 385rpx;
    line-height: 72rpx;
    font-size: 28rpx;
    color: rgba(37, 104, 174, 1);
    margin: 32rpx 0rpx 0rpx 0rpx;
  }

  .notgrainStation_fd1_1_c2_c1 {
    color: #FFFFFF;
    font-size: 28rpx;
    font-weight: 700;
    line-height: 28rpx;
  }

  .notgrainStation_fd1_1_c2_c0 {
    margin: 0rpx 25rpx 0rpx 0rpx;
    font-size: 32rpx;
    color: var(--benbenFontColor3);
  }

  .notgrainStation_fd1_1_c2 {
    background: rgba(37, 104, 174, 1);
    margin: 50rpx 0rpx 0rpx 0rpx;
    width: 385rpx;
    height: 88rpx;
    border-radius: 44rpx;
    background-size: 100% auto;
  }

  .notgrainStation_fd1_1_c1 {
    color: #999999;
    font-size: 26rpx;
    font-weight: 400;
    line-height: 42rpx;
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .notgrainStation_fd1_1_c0 {
    color: #14151A;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .notgrainStation_fd1_1 {
    margin: 32rpx 0rpx 0rpx 0rpx;
  }

  .notgrainStation_fd1_0_c0 {
    width: 750rpx;
    height: 500rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
</style>
